<template>
	<view>
		<u-swiper :list="list2" height="762rpx" circular></u-swiper>
		<view class="con">
			<view class="con__info">
				<view class="u-flex u-flex-items-end u-flex-between">
					<view class="">
						<text class="con__info__price">￥{{item.price}}</text>
						<text class="con__info__oldprice">￥{{item.oldprice}}</text>
					</view>
					<!-- <view class="con__info__xl">
						销量1111
					</view> -->
				</view>
				<view class="con__info__name">
					{{item.name}}
				</view>
				<!-- 	<view class="con__info__text">
					1111
				</view> -->
			</view>


			<view class="con__xq">
				<view class="con__xq__title">
					商品详情
				</view>
				<view class="">
					<image :src="item" class="con__xq__pic" mode="widthFix" v-for="(item,index) in list1" :key="index">
					</image>
				</view>

			</view>
		</view>
		<view class="footer">
			<view style="width: 45%;">
				<view class="footer__buy" @click="show=true;tab1='直接换新'">
					直接换新
				</view>
			</view>
			<view style="width: 45%;">
				<view class="footer__buy" @click="show=true;tab1='以旧换新'" style="background-color: #de837c;">
					以旧换新
				</view>

			</view>
		</view>


		<u-popup :show="show" @close="show=false" mode="bottom">
			<view class="box">
				<view class="close" @click="show=false">
					<u-icon name="close"></u-icon>
				</view>
				<view class="header">
					<image :src="'https://ba.fuliaoxx.com'+item.images.split(',')[0]" mode=""></image>
					<view class="detail">
						<view class="" style="color: #DE4E4A;font-weight: 600;font-size: 40rpx;" v-if="tab1=='直接换新'">
							￥{{chose.new_price}}
						</view>
						<view class="" style="color: #DE4E4A;font-weight: 600;font-size: 40rpx;" v-else>
							￥{{chose.old_price}}
						</view>

						<view class="" style="color: #626262;">
							{{item.name}}
						</view>
						<u-number-box v-model="value"></u-number-box>
					</view>
				</view>
				<view class="content">
					<view class="" style="margin-bottom: 20rpx;">
						选择规格
					</view>
					<view class="items">
						<view :class="tab==index?'item active':'item' " v-for="(ite,index) in list3" :key="index"
							@click="choose(ite,index)">
							<view class="">
								{{ite.name}}
							</view>
						</view>
					</view>
					<view class="btn" @click="toBuy">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSpec
	} from "@/request/api/goods.js"
	export default {
		data() {
			return {
				show: false,
				list1: [],
				list2: [],
				list3: [],
				value: 1,
				item: {},
				tab: 0,
				tab1: "直接换新",
				chose: {}
			};
		},

		methods: {
			toBuy() {
				if (this.tab1 == "直接换新") {
					uni.navigateTo({
						url: `/pages/buy2/buy?item=${JSON.stringify(this.item)}&num=${this.value}&price=${this.chose.new_price}&spec_id=${this.chose.id}&spec_name=${this.name}&old_new=2`
					})
					return
				}
				uni.navigateTo({
					url: `/pages/buy2/buy?item=${JSON.stringify(this.item)}&num=${this.value}&price=${this.chose.old_price}&spec_id=${this.chose.id}&spec_name=${this.name}&old_new=1`
				})
			},
			choose(item, index) {
				this.chose = item;
				this.tab = index;
			}
		},
		onLoad(opt) {
			let json = JSON.parse(opt.item);
			this.list1 = json.desc_images.split(',').map(it => {
				return 'https://ba.fuliaoxx.com' + it
			})
			this.list2 = json.images.split(',').map(it => {
				return 'https://ba.fuliaoxx.com' + it
			})
			this.item = json;
			getSpec({
				product_id: json.id
			}).then(res => {
				console.log(res)
				this.list3 = res.data;
				this.chose = this.list3[0];
			})
		},
		onShow() {}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.footer__buy {
		border-radius: 100px !important;
	}

	.footer {
		width: 100vw;
		height: 148rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 30rpx 0 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		&__kf {
			width: 38rpx;
			height: 40rpx;
		}

		&__car {
			width: 47rpx;
			height: 37rpx;
		}

		&__text {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #505050;
			line-height: 20rpx;
			margin-top: 22rpx;
			width: 60rpx;
			text-align: center;
			word-break: break-all;
		}

		&__addcar {
			width: 252rpx;
			height: 94rpx;
			background: #ECFDEC;
			border-radius: 47rpx 0rpx 0rpx 47rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #2F3931;
			line-height: 42rpx;
		}

		&__buy {
			// font-family: PingFang SC;
			// font-weight: 500;
			// font-size: 30rpx;
			// color: #FFFFFF;
			// line-height: 42rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			// width: 252rpx;
			// height: 94rpx;
			// background: #75D65E;
			// border-radius: 0rpx 47rpx 47rpx 0rpx;
			text-align: center;
			background-color: #75D65E;
			padding: 26rpx 0;
			border-radius: 14rpx !important;

		}
	}

	.con {
		padding: 26rpx 30rpx 158rpx;

		&__info {
			padding: 26rpx 27rpx 25rpx;
			background-color: #fff;
			border-radius: 20rpx;

			&__price {
				font-family: DIN Next LT Pro;
				font-weight: 500;
				font-size: 43rpx;
				color: #FF4D30;
				line-height: 31rpx;
				padding-left: 5rpx;

			}

			&__oldprice {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 23rpx;
				color: #919191;
				line-height: 17rpx;
				margin-left: 8rpx;
				text-decoration-line: line-through;
			}

			&__xl {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #919191;
				line-height: 24rpx;
			}

			&__name {
				margin-top: 20rpx;
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 33rpx;
				color: #181818;
				line-height: 62rpx;
			}

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #6A6A6A;
				line-height: 40rpx;

			}
		}

		&__ms {
			padding: 16rpx 30rpx 20rpx 26rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin: 26rpx 0;

			&__item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 78rpx;

				&__label {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #888888;
					line-height: 24rpx;
					margin-right: 34rpx;
				}

				&__v {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #3A3A3A;
					line-height: 24rpx;
					flex: 1;
				}

				&__m {
					width: 13rpx;
					height: 22rpx;
				}
			}
		}

		&__pj {
			padding: 0 29rpx;
			display: flex;
			align-items: center;
			height: 93rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			justify-content: space-between;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #3A3A3A;
			line-height: 28rpx;

			&__more {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #919191;
				line-height: 24rpx;
			}
		}

		&__xq {
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 24rpx;

			&__title {
				height: 95rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #3A3A3A;
				line-height: 28rpx;

				&__icon {
					width: 32rpx;
					height: 13rpx;
					margin: 0 7rpx;
				}
			}

			&__pic {
				width: 690rpx;
			}
		}
	}

	.box {
		position: relative;
		height: 70vh;
		padding: 20rpx;
		border-radius: 20rpx;

		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.btn {
			position: absolute;
			bottom: 20rpx;
			text-align: center;
			background-color: #75D65E;
			padding: 26rpx 0;
			border-radius: 14rpx;
			width: 90%;
			left: 5%;
		}

		.content {
			padding: 20rpx 0;

			.items {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				height: 32vh;
				overflow: auto;

				.item {
					width: 45%;
					display: flex;
					align-items: center;
					background-color: #F5F5F5;
					padding: 10rpx;
					margin-bottom: 20rpx;
					border-radius: 8rpx;
					border: 1rpx solid #F5F5F5;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}

				.active {
					border: 1rpx solid #54C439;
				}
			}
		}

		.header {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F1F1F1;
			padding-bottom: 20rpx;

			image {
				width: 190rpx;
				height: 190rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.detail {
				height: 190rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}
	}
</style>